<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <title>Document</title>
        <link rel="stylesheet" href="elementUI/theme-default/index.css" /> 
    </head>
    <body>
        <script src="http://unpkg.com/vue/dist/vue.js"></script>
        <script src="http://unpkg.com/element-ui@1.3.5/lib/index.js"></script>
        <script src="js/echarts.common.min.js"></script>
        <div id="app">
          <template>
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="操作总览" name="first">
                  <el-form :inline="true" class="demo-form-inline">
                    <el-form-item label="最近">
                      <el-button :plain="true" type="info" @click="operateLog(1)">一天</el-button>
                      <el-button :plain="true" type="info" @click="operateLog(3)">三天</el-button>
                      <el-button :plain="true" type="info" @click="operateLog(7)">七天</el-button>
                    </el-form-item>
                    <el-form-item label="时间范围">
                      <el-date-picker
                        v-model="dateRange"
                        type="daterange"
                        align="right"
                        placeholder="选择日期范围"
                        :picker-options="pickerOptions">
                      </el-date-picker>
                    </el-form-item>
                  </el-form>
                  <el-row>
                      <el-col :span="12">
                          <div id="operateLogChart" style="height:400px"></div>
                      </el-col>
                      <el-col :span="12">
                          <div id="checkedDetailChart" style="height:400px"></div>
                      </el-col>
                  </el-row>

              </el-tab-pane>
              <el-tab-pane label="操作轨迹" name="second">
                  <div>
                      <el-row  :gutter="20">
                          <el-col :span="24" class="h3">2017-06-12</el-col>
                      </el-row>
                      <el-row :gutter="20">
                          <el-col :span="4">17:43:30</el-col>
                          <el-col :span="20"><span class="red">退出</span>了CMS后台</el-col>
                      </el-row>
                      <el-row :gutter="20">
                          <el-col :span="4">17:43:30</el-col>
                          <el-col :span="20"><span class="red">指定</span>了一篇新闻，编辑后标题为：“<span class="red">这是一篇被加黑的新闻标题”。</span></el-col>
                      </el-row>
                  </div>
                  
                  
              </el-tab-pane>
              <el-tab-pane label="我操作的新闻" name="third">
                  <el-form :inline="true" class="demo-form-inline">
                    <el-form-item label="时间范围">
                      <el-date-picker
                        v-model="dateRange"
                        type="daterange"
                        align="right"
                        placeholder="选择日期范围"
                        :picker-options="pickerOptions">
                      </el-date-picker>
                    </el-form-item>
                    <el-form-item label="操作详情">
                        <el-select v-model="filterType" placeholder="全部">
                          <el-option label="全部" value="shanghai"></el-option>
                          <el-option label="新增" value="beijing"></el-option>
                          <el-option label="编辑" value="beijing"></el-option>
                          <el-option label="加黑" value="shanghai"></el-option>
                          <el-option label="撤销" value="beijing"></el-option>
                          <el-option label="404" value="beijing"></el-option>
                          <el-option label="禁止评论" value="shanghai"></el-option>
                          <el-option label="允许评论" value="beijing"></el-option>
                          <el-option label="置顶" value="beijing"></el-option>
                        </el-select>
                     </el-form-item>
                  </el-form>
                  <el-table :data="operatedNews" stripe border highlight-current-row width="100%">
                      <el-table-column label="日期" prop="date" ></el-table-column>
                      <el-table-column label="标题" prop="title"></el-table-column>
                      <el-table-column label="来源" prop="source"></el-table-column>
                      <el-table-column label="分类" prop="type"></el-table-column>
                      <el-table-column label="视频地址" prop="videoUrl"></el-table-column>
                      <el-table-column label="操作人" prop="operator"></el-table-column>
                      <el-table-column label="操作详情" prop="operateDetail"></el-table-column>
                  </el-table>
              </el-tab-pane>
            </el-tabs>
          </template>
        </div>
        <style>
            .red{
                color:red;
            }
            .h3{
                font-size:16px;
            }
        </style>
        <script>
          new Vue({
            el:'#app',
            data() {
              return {
                activeName: 'first',
                filterType:'',
                pickerOptions: {
                shortcuts: [{
                  text: '最近一周',
                  onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                    picker.$emit('pick', [start, end]);
                  }
                }, {
                  text: '最近一个月',
                  onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                    picker.$emit('pick', [start, end]);
                  }
                }, {
                  text: '最近三个月',
                  onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                    picker.$emit('pick', [start, end]);
                  }
                }]
              },
              dateRange: '',
              operateLogChart:null,
              checkedDetailChart:null,
              operatedNews: [
                  {
                    date:'2017-05-06',
                    title:'崔永元网店一瓶油卖780，网友：孟非家398的牛肉好便宜',
                    source:'星辰娱乐',
                    type:'娱乐',
                    videoUrl:'http://mp.eastday.com/dfh/html/20170524/1495610180609037684.html',
                    operator:'朱成斌',
                    operateDetail:'新增'
                  },
                  {
                    date:'2017-04-06',
                    title:'崔永元网店一瓶油卖780，网友：孟非家398的牛肉好便宜',
                    source:'星辰娱乐',
                    type:'娱乐',
                    videoUrl:'http://mp.eastday.com/dfh/html/20170524/1495610180609037684.html',
                    operator:'朱成斌',
                    operateDetail:'加黑'
                  },
                  {
                    date:'2017-03-06',
                    title:'崔永元网店一瓶油卖780，网友：孟非家398的牛肉好便宜',
                    source:'星辰娱乐',
                    type:'娱乐',
                    videoUrl:'http://mp.eastday.com/dfh/html/20170524/1495610180609037684.html',
                    operator:'朱成斌',
                    operateDetail:'撤销'
                  }
              ]
              }
            },
            mounted: function(){
                var _this=this;
                _this.operateLogChart=echarts.init(document.getElementById('operateLogChart'));
                _this.checkedDetailChart=echarts.init(document.getElementById('checkedDetailChart'));

                _this.operateLogChart.setOption=({
                    title:'共操作新闻458篇',
                    tooltip: {},
                    xAxis: {
                        data: ["审核", "新增", "编辑", "操作"]
                    },
                    yAxis: {},
                    series: [{
                        name: '操作新闻概览',
                        type: 'bar',
                        data: [5, 20, 36, 10]
                    }]
                });

                // this.operateLogChart.setOption({
                //     title: { text: 'Column Chart' },
                //     tooltip: {},
                //     xAxis: {
                //         data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
                //     },
                //     yAxis: {},
                //     series: [{
                //         name: '销量',
                //         type: 'bar',
                //         data: [5, 20, 36, 10, 10, 20]
                //     }]
                // });
                _this.checkedDetailChart.setOption=({
                    title:'审核详情',
                    tooltip: {},
                    xAxis: {
                        data: ["审核通过", "审核拒绝", "驳回编辑"]
                    },
                    yAxis: {},
                    series: [{
                        name: '审核详情1',
                        type: 'pie',
                        data: [5, 20, 36, 10]
                    }]
                });
            },
            methods: {
              handleClick(tab, event) {
                console.log(tab, event);
              },
              operateLog() {
                console.log("1")
              }
            }
          });
        </script>
    </body>
</html>